<template>
  <div>
    <div class="list" v-if="goodsList.length">
      <div class="product" v-for="item in goodsList" :key="item.id" @click="goToProductDetail(item.id)">
        <img :src="item.list_pic_url" alt />
        <p>{{item.name}}</p>
        <span>{{item.retail_price | yuan}}</span>
      </div>
    </div>
    <van-empty image="search" description="你寻找的商品未上架" v-else />
  </div>
</template>
 
<script>
export default {
  props: ["goodsList"],
  methods: {
    goToProductDetail(id){
      this.$router.push("/productdetail/"+id)
    }
  },
};
</script>
 
<style lang = "less" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  text-align: center;
  .product {
    width: 45%;
    overflow: hidden;
    background: #fff;
    margin: 8px;
    padding: 10px;
    box-sizing: border-box;
    img {
      width: 100%;
    }
    span {
      color: red;
    }
    p{
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

</style>